import React, { useEffect, useRef } from 'react';
import flvjs from 'flv.js';

const VideoPlayer = () => {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    const flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://localhost:3030/stream.flv',
    });

    flvPlayer.attachMediaElement(video);
    flvPlayer.load();
    flvPlayer.play();

    return () => {
      flvPlayer.destroy();
    };
  }, []);

  return (
    <div>
      <video
        ref={videoRef}
        controls
        width="600"
        height="500"
        style={{ background: '#000' }}
        muted 
      ></video>
    </div>
  );
};

export default VideoPlayer;
